<template>
  <view class="yh-page">
	<!-- 主图 -->
	<image class="show_picture" :src="showPicture" ></image>
	<!-- 主图+sku列表 -->
	 <view class="scroll-view">
		<image :class="{scrollViewImage:true,selectPicture:isSelectMainPicture(index)}" v-for="(item,index) in scrollMainPictureList" :key="index"  :src="item.picture" mode=""@tap="handleToClickScrollMainImage(item,index)"></image>
		<template v-if="scrollSkuPictureList.length > 0">
			<image :class="{scrollViewImage:true,selectPicture:isSelectSkuPicture(skuIndex)}" v-for="(item,skuIndex) in scrollSkuPictureList" :key="skuIndex + scrollMainPictureList.length"  :src="item.picture" mode=""@tap="handleToClickScrollSkuImage(item,skuIndex)"></image>
		</template>
	 </view>
	 <!-- spu和库存 -->
	 <view class="show_spec_store">
	 	<view class="spu_sku_name">
	 		{{ spuName }}&nbsp;{{skuName}}
	 	</view>
		<view class="store_number">
			库存 {{ store_number }}
		</view>
	 </view>
	 <!-- 价格和星级 -->
	 <view class="price_star">
	 	<view class="sale_price">
	 		¥ {{sale_price}}
	 	</view>
		<view class="separator">
			|
		</view>
		<view class="coin_price">
			H {{coin_price}}
		</view>
		<view class="goods_star">
			<uni-rate size="18" :readonly="true" :value="goods_star" />
		</view>
	 </view>
	 <!-- 标题 -->
	 <view class="owner_title">
	 	<view v-if="owner_type === 10" class="shop_type green">
	 		店营
	 	</view>
	 	<view v-if="owner_type === 30" class="shop_type blue">
	 		自营
	 	</view>
	 	<view v-if="owner_type === 40" class="shop_type red">
	 		直营
	 	</view>
		<view class="title">
			{{title}}
		</view>
	 </view>
	 <!-- 商品详情 -->
	 <view class="goods_description">
		<view v-html="goods_description"></view>
		<view class="bottom-block" />
	 </view>
	 
	 <!-- 底部操作面板 -->
	 <view class="bottom_pannel">
	 	<view class="bottom_action">
	 		<view class="action_item" >
	 			<view class="item_cion">
	 				<image class="item_icon_image" :src="userUnShop" />
	 			</view>
				<view class="item_word">
					店铺
				</view>
	 		</view>
			<view class="action_item">
				<view class="item_cion">
					<image class="item_icon_image" :src="userUnCollect" />
				</view>
				<view class="item_word">
					收藏
				</view>
			</view>
			<view class="action_item">
				<view class="item_cion">
					<image class="item_icon_image" :src="userUnShare" />
				</view>
				<view class="item_word">
					分享
				</view>
			</view>
			<view @tap="handleToBuy()" class="buy_btn">
				立即购买
			</view>
	 	</view>
		<view class="bottom_line">
			<view class="line" />
		</view>
	 </view>
	 <!-- 弹出层 -->
	 <yh-popup :isPopup="isPopup">
		 <template #content>
		 	<confirm-order />
		 </template>
	 </yh-popup>
  </view>
</template>

<script>
  import {userCollect,userUnCollect,userShop,userUnShop,userShare,userUnShare} from '@/config/picUrl'
  import { checkAll } from '@/utils/chekLogin'
  import { showGoodsInfo } from '@/api/youhu/user/goods/goodsInfo'
  import confirmOrder from './component/confirm_order'
  export default 
  {
    //计算属性
    computed:
    {
		
    },
    //监听
    watch:
    {

    },
	//组件
	components:
	{
		confirmOrder,
	},
    data() 
    {
    	return{
			//商品id
			goods_id:0,
			goodsInfo:{},
			//显示图片
			showPicture:null,
			//默认选中的图片类型 10主图 20sku图
		    defaultSelectPictureType:10,
			// 滑动图片列表
			scrollMainPictureList:[],
			//默认选中的图片
			selectMainPictureIndex:0,
			// sku图片列表
			scrollSkuPictureList:[],
			//默认选中的sku图片
			selectSkuPictureIndex:0,
			
			// 显示的spu+sku
			spuName:'',
			skuName:'',
			store_number:0,
			sale_price:'0.00',
			coin_price:'0.00',
			goods_star:0,
			owner_type:0,
			title:'',
			goods_description:null,
			// 产品skuArray
			goodsSkuArray:[],
			//选中的sku
			goods_sku_id:0,
			selectSkuItem: null,
			//icon
			userCollect:null,
			userUnCollect:null,
			userShop:null,
			userUnShop:null,
			userShare:null,
			userUnShare:null,
			//是否弹出
			isPopup:0
			
        };
    },
    //页面加载
    onLoad(options) 
    {
		checkAll()
		// console.log(options)
		this.goods_id = options.goods_id
		this.showGoodsInfo()
		this.userCollect = userCollect
		this.userUnCollect = userUnCollect,
		this.userShop = userShop,
		this.userUnShop = userUnShop,
		this.userShare = userShare,
		this.userUnShare = userUnShare
    },
    //页面显示
    onShow() 
    {

    },
    //页面初次渲染完成
    onReady()
    {

    },
    //页面隐藏
    onHide()
    {

    },
    //页面卸载
    onUnload()
    {

    },
    methods:{
		//查看商品详情
		showGoodsInfo()
		{
			// console.log(this.goods_id)
			if(this.goods_id)
			{
				const _this = this
				showGoodsInfo({goods_id:this.goods_id}).then(res=>
				{
					return new Promise((resolve,reject)=>
					{
						if(res && res.code === 0)
						{
							// console.log(res)
							this.goodsInfo = res.data
							const goodsInfo = res.data
							// 显示图片
							_this.showPicture = goodsInfo.goods_main_picture[0].picture
							// 主图列表
							_this.scrollMainPictureList = goodsInfo.goods_main_picture
							// sku处理
							_this.goodsSkuArray = goodsInfo.goods_sku_array
							const skuPictureList = []
							
							_this.goodsSkuArray.forEach((skuItem,index)=>
							{
								// console.log(skuItem)
								skuItem.sku_picture_array.forEach((skuPictureitem,picuteIndex)=>{
									// console.log(skuPictureitem)
									
									let scrollSkuPictureItem = {...skuItem,...skuPictureitem}
									skuPictureList.push(scrollSkuPictureItem)
								})
							})
							
							// console.log(skuPictureList)
							_this.scrollSkuPictureList = skuPictureList
							
							//spu 和sku
							_this.spuName = goodsInfo.goods_spu
							
							//库存
							_this.store_number = goodsInfo.store_number
							//售价
							_this.sale_price = goodsInfo.sale_price
							//系统币
							_this.coin_price = goodsInfo.coin
							//星级
							_this.goods_star = goodsInfo.star
							//所有者类型
							_this.owner_type = goodsInfo.owner_type
							//标题
							_this.title = goodsInfo.goods_name
							//商品详情
							_this.goods_description = goodsInfo.goods_description
							
							
						}
						
							
					})
				})
			}
		},
		// 是否选中主图
		isSelectMainPicture(index)
		{
			let result = false;
			
			if(this.defaultSelectPictureType === 10 && this.selectMainPictureIndex === index)
			{
				result = true
			}
			
			return result
		},
		// 是否选中sku图
		isSelectSkuPicture(skuIndex)
		{
			let result = false;
			
			if(this.defaultSelectPictureType === 20 && this.selectSkuPictureIndex === skuIndex)
			{
				result = true
			}
			
			return result
		},
		//点击单个主图图片
		handleToClickScrollMainImage(item,index)
		{
			// console.log(item)
			
			this.defaultSelectPictureType = 10
			this.selectMainPictureIndex = index
			
			this.showPicture = item.picture
			this.skuName = ''
			this.store_number = this.goodsInfo.store_number
			this.sale_price = this.goodsInfo.sale_price
			this.coin_price = this.goodsInfo.coin
			//清除sku
			this.goods_sku_id = 0
			this.selectSkuPictureIndex = null
			this.selectSkuItem = null
		},
		//点击单个sku图片
		handleToClickScrollSkuImage(item,skuIndex)
		{
			//console.log(item)
			
			this.defaultSelectPictureType = 20
			this.selectSkuPictureIndex = skuIndex
			
			this.goods_sku_id = item.goods_sku_id
			this.showPicture = item.picture
			this.skuName = item.goods_sku
			this.store_number = item.store_number
			this.sale_price = item.sale_price
			this.coin_price = item.coin,
			this.selectSkuItem = item
			
			this.selectMainPictureIndex = 0
		},
		//点击购买
		handleToBuy()
		{
			// console.log('to buy');
			this.isPopup = this.isPopup + 1
			let toBuyGoods = {
				goods_id:this.goods_id,
				goods_sku_id:this.goods_sku_id,
				sale_price:this.sale_price,
				coin_price:this.coin_price,
				picture:this.showPicture,
				spuName:this.spuName,
				skuName:this.skuName,
				selectSkuItem:this.selectSkuItem,
				goodsSkuArray:this.goodsSkuArray,
				//选中的sku
				selectSkuIndex:this.selectSkuPictureIndex,
				//购买数量默认为1
				buy_number:1,
			}
			//console.log(toBuyGoods)
			this.$nextTick(()=>{
				uni.$emit('toBuyGoods',toBuyGoods)
			})
			
		}
    }
  }
</script>
<style lang="scss" scoped>
.show_picture{
	width:750rpx;
	height:750rpx;
}
.scroll-view{
	display: flex;
	flex-direction: row;
	width:atuo;
	overflow: hidden;
	overflow-x: auto; 
	margin-top: 40rpx;
	margin-left: 40rpx;
	.scrollViewImage{
		width: 104rpx;
		min-width: 104rpx;
		height:104rpx;
		margin-right:18rpx;
		border-radius: 8rpx;
		border: 5rpx solid  #ECEFF5;
	}
	.selectPicture{
		border: 5rpx solid  #FF530A;
	}
}
.show_spec_store{
	display: flex;
	flex-direction: row;
	width:auto;
	.spu_sku_name{
		width: 512rpx;
		height: 52rpx;
		padding-left: 22rpx;
		margin-left:40rpx;
		margin-top: 26rpx;
		margin-right: 44rpx;
		background: rgba(255,83,10,0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF530A;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis; 
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF530A;
		line-height: 52rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.store_number{
		width:auto;
		height:34rpx;
		margin-top: 38rpx;
		line-height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #4E5969;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		
	}
}
.price_star{
	display: flex;
	flex-direction: row;
	width:auto;
	margin-top: 24rpx;
	.sale_price{
		margin-left: 40rpx;
		height:68rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FF530A;
		line-height: 68rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.separator{
		margin-left: 46rpx;
		margin-right:46rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FF530A;
		line-height: 68rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.coin_price{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FF530A;
		line-height: 68rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.goods_star{
		margin-top: 18rpx;
		margin-left: 76rpx;
	}
}
.owner_title{
	display: flex;
	flex-direction: row;
	width:auto;
	margin-top: 32rpx;
	.shop_type{
		height:36rpx;
		width: 52rpx;
		min-width: 52rpx;
		height: 36rpx;
		margin-left: 40rpx;
		background: #0D8CE9;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-family: Noto Sans SC, Noto Sans SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.green{
		background: #00B42A;
	}
	.blue{
		background: #0D8CE9;
	}
	.red{
		background: #AD7AFD;
	}
	.title{
		width:auto;
		margin-left:40rpx;
		height: 36rpx;
		
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
}
.goods_description{
	width:750rpx;
	height:auto;
	margin-top: 46rpx;
	.bottom-block{
		width:750rpx;
		height:170rpx;
	}
}
.bottom_pannel{
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height:168rpx;
  background-color:#FFFFFF;
  .bottom_action{
	width: 750rpx;
	height: 100rpx;
	display: flex;
	flex-direction: row;
	.action_item{
		margin-top: 10rpx;
		width:112rpx;
		height:80rpx;
		.item_icon_image{
			width:48rpx;
			height:48rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;
		}
		.item_word{
			width:48rpx;
			height: 28rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #2E3235;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;

		}
	}
	.buy_btn{
		margin-top: 10rpx;
		margin-left: 32rpx;
		width: 350rpx;
		height: 80rpx;
		background: linear-gradient( 133deg, #0D8CE9 0%, #0074FD 77%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
  }
  .bottom_line{
	  width: 750rpx;
	  height: 68rpx;
	  .line{
		  margin-left: 241rpx;
		  margin-top: 42rpx;
		  width: 268rpx;
		  height: 10rpx;
		  background: #000000;
		  border-radius: 200rpx 200rpx 200rpx 200rpx;
		 
	  }
  }
}
</style>
